<template>
  <div v-if="dataLength>=11" class="upperLimit">曲线数量超过上限，此处不做显示(最多显示10条曲线)</div>
  <div v-else className="water-ele-rate-chart-container">
    <div className="water-ele-rate-chart-view" id="water-ele-rate-chart-id"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {ref, onMounted, onBeforeUnmount} from 'vue';
import _ from "underscore";

export default {
  setup() {
    let waterEleRateChart = null;
    const dataLength = ref(0);
    // 初始化图表
    const initChart = () => {
      const chartDom = document.getElementById('water-ele-rate-chart-id');
      waterEleRateChart = echarts.init(chartDom);

    };
    const setData = (data, showLength) => {
      //判断
      dataLength.value = 0;
      if (showLength >= 11) {
        dataLength.value = showLength;
        return;
      }
      initChart();
      let dataSeries = []
      let color = [{
        color: '#19a3df',
        borderColor: '#a3c8d8',
        areaStyleColor: 'rgba(88,255,255,0.2)'

      }, {
        color: '#00d4c7',
        borderColor: '#8ec5c2',
        areaStyleColor: 'rgba(0,212,199,0.2)'

      }, {
        color: '#0092f6',
        borderColor: '#8eb0c7',
        areaStyleColor: 'rgba(0,146,246,0.2)'

      }, {
        color: '#aecb56',
        borderColor: '#c5ceaa',
        areaStyleColor: 'rgba(114,114,89,0.2)'

      }];
      let num = 0;
      _.forEach(data.data, function (item, index) {
        if (item.type) {
          num++;
          if (num == 8) num = 0;
          dataSeries.push({
            name: item.name,
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 4,
            zlevel: 3,
            itemStyle: {
              color: num < color.length ? color[num].color : color[num - color.length < color.length ? num - color.length : num - (color.length + num)].color,
              borderColor: num < color.length ? color[num].borderColor : color[num - color.length < color.length ? num - color.length : num - (color.length + num)].borderColor,
            },
            lineStyle: {
              normal: {
                width: 1,
                color: num < color.length ? color[num].color : color[num - color.length < color.length ? num - color.length : num - (color.length + num)].color,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: num < color.length ? color[num].areaStyleColor : color[num - color.length < color.length ? num - color.length : num - (color.length + num)].areaStyleColor,
                      },
                      {
                        offset: 0.8,
                        color: 'rgba(88,255,255,0)',
                      },
                    ],
                    false
                ),
              },
            },
            data: item.data,
          })
        }
      });
      const option = {
        legend: {
          icon: 'circle',
          type: "scroll",
          right: '0%',
          align: 'left',
          orient: 'vertical',
          top: 'middle',
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: '#556677'
          },
          height: 233
        },
        grid: {
          left: "3%",
          right: "17%",
          bottom: "5%",
          top: "5%",
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(255,255,255,0)', // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255,255,255,1)', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0)', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          appendToBody: true,
          position: function (point, params, dom, rect, size) {
            // point: 鼠标位置 [x, y]。
            // params: 与当前鼠标位置相关的数据信息对象。
            // dom: tooltip 的 DOM 节点。
            // rect: 绑定了 tooltip 的图形的包围盒。
            // size:  包括 size.contentSize 和 size.viewSize，其中每个都是 [width, height] 形式的数组。
            // 返回值是 [x, y] 形式的数组，表示 tooltip 的位置。

            // 以下代码确保 tooltip 不会超出边界
            var result = [point[0], point[1]];
            if (result[0] + size.contentSize[0] > size.viewSize[0]) {
              result[0] = size.viewSize[0] - size.contentSize[0];
            }
            if (result[1] + size.contentSize[1] > size.viewSize[1]) {
              result[1] = size.viewSize[1] - size.contentSize[1];
            }
            return result;
          },
          extraCssText: 'z-index:999'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              formatter: '{value}',
              fontSize: 12,
              margin: 20,
              textStyle: {
                color: '#7ec7ff',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#243753',
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#243753',
              },
            },
            axisTick: {
              show: false,
            },
            data: data.time
          },
        ],
        yAxis: [
          {
            boundaryGap: false,
            type: 'value',
            axisLabel: {
              textStyle: {
                fontSize: 10,
                color: '#7ec7ff',
              },
            },
            nameTextStyle: {
              color: '#fff',
              fontSize: 10,
              lineHeight: 40,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#243753',
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#283352',
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: dataSeries
      };
      waterEleRateChart.setOption(option, true);
    }
    onBeforeUnmount(() => {
      if (waterEleRateChart) {
        waterEleRateChart.dispose();
      }
    });

    return {
      setData,
      dataLength
    };
  }
};
</script>

<style scoped>
.water-ele-rate-chart-container {
  width: 100%;
  height: 350px;
}

.water-ele-rate-chart-view {
  width: 100%;
  height: 350px;
}
</style>
